<template>
<div class="login-main">
<!--  背景区-->
  <vue-particles
          color="#a3c0ec"
          :particleOpacity="0.8"
          :particlesNumber="250"
          shapeType="circle"
          :particleSize="4"
          linesColor="#65b4fd"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push"
          class="bg">

  </vue-particles>
  <div class="login-box">
<!--头像区-->
    <div class="login-image">
      <img src="../assets/images/鬼灭之人4.png" alt="">
    </div>
<!--内容区-->
    <div class="login-form" >
      <el-form label-width="0px" :model="form" :rules="loginRules" ref="loginRef">
        <el-form-item prop="username">
          <el-input prefix-icon="iconfont icon-user" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="iconfont icon-password" v-model="form.password" type="password"></el-input>
        </el-form-item>
      </el-form>
<!--按钮-->
      <el-form label-width="0px" class="login-button">
        <el-form-item>
          <el-button type="primary" @click="validateForm">登录</el-button>
          <el-button type="info" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</div>
</template>

<script>
export default {
  name: '',
  data(){
    return{
      form:{
        username:'admin',
        password:'123456',
      },
      loginRules:{
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    resetForm(){
      this.$refs.loginRef.resetFields()
    },
    validateForm(){
      this.$refs.loginRef.validate(result => {
        if (!result) return;
        else{
          this.$http.post('login',this.form).then(result => {
            if (result.data.meta.status !== 200) return this.$message.error('登录失败')
            this.$message.success('登录成功')
            window.sessionStorage.setItem("token",result.data.data.token)
            this.$router.push('/home')
          })
        }
      })
    }
  }
}
</script>
<style lang='less' scoped>
.login-main{
  height: 100%;
  .login-box{
    background-color: #fff;
    width: 450px;
    height: 300px;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    .login-image{
      width: 130px;
      height: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      box-shadow: 0 0 10px #ddd;
      padding: 10px;
      position: absolute;
      left: 50%;
      transform: translate(-50%,-50%);
      background-color: #fff;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;

      }
    }
    .login-form{
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 15px;
      box-sizing: border-box;
      .login-button{
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
  .iconfont{
    font-size: 18px;
  }
  .bg{
    background-image: url("../assets/images/bg4.jpeg");
    background-size: cover;
  }
</style>